<template>
  <div class="main-div">
    <el-form :inline="true" :model="query" class="demo-form-inline">
      <el-form-item label="名称">
        <el-input v-model="query.roleName" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getRoleList">查询</el-button>
      </el-form-item>
    </el-form>

    <div class="add-div">
      <el-button type="primary" plain @click="show">新增</el-button>
    </div>

    <el-table :data="roleList" style="width: 80%">
      <el-table-column prop="id" label="id" width="180"/>
      <el-table-column prop="name" label="角色名称" width="180"/>
      <el-table-column prop="description" label="描述" width="180"/>
      <el-table-column prop="createTime" label="创建时间" width="180"/>
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope" >
          <el-button v-if="scope.row.name !== '超级管理员'" link type="primary" size="small" @click="roleReedBackValue(scope.row)">修改</el-button>
          <el-button v-if="scope.row.name !== '超级管理员'" link type="primary" size="small" @click="shouquan(scope.row)">授权</el-button>
          <el-button v-if="scope.row.name !== '超级管理员'" link type="primary" size="small" @click="deleteRole(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="showPagination">
      <el-pagination :page-size="query.pageSize" :current-page="query.pageNum"
                     layout="prev, pager, next" :total="query.total" @current-change="getStaffList"/>
    </div>

    <el-dialog width="30%" :modal="roleInfo" v-model="dialogVisible">
      <el-form ref="formTemp" label-width="100px">
        <el-form-item label="角色名称">
          <el-input v-model="roleInfo.name" placeholder="请输入角色名称"/>
        </el-form-item>
        <el-form-item label="角色描述">
         <textarea v-model="roleInfo.description" placeholder="请输入角色描述" rows="5" cols="40"></textarea>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button type="primary" @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog width="30%" :modal="roleMenuInfo" v-model="dialogVisibleShouquan">
      <el-form ref="formTemp" label-width="100px">
        <div class="m-4">
          <el-cascader v-model="casValue" :options="menuList"
                       :props="{value: 'id', label: 'name', children: 'children', multiple: true, checkStrictly: true }"
                       clearable placeholder="请选择菜单" collapse-tags expandTrigger="hover" @change="change"/>
        </div>
        <el-form-item>
          <el-button type="primary" @click="onSubmit1">提交</el-button>
          <el-button type="primary" @click="dialogVisibleShouquan = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import {MenuList, RoleDelete, RoleEdit, RoleList, RoleMenuAdd} from '@/api/admin.js'
import {ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {useRouter} from 'vue-router'

const router = useRouter();

const userInfo = localStorage.getItem("userInfo")
const uInfo = JSON.parse(userInfo);
console.log(uInfo.roleName)

var dialogVisible = ref(false);
var dialogVisibleShouquan = ref(false);

var roleList = ref([]);

var roleId = ref(0);

var menuList = ref([]);

var showPagination = ref(false);

var tag = ref(-1);

var casValue = ref([]);

// 修改角色信息
var roleInfo = ref({
  id:'',
  name: '',
  description:'',
});

var roleMenuInfo = ref({
  roleId: 0,
  menuIds: ''
});

// 分页参数
const query = ref({
  pageNum: 1,
  pageSize: 5,
  total: 0,
  roleName: null
})


// 上一页 和 下一页
function getStaffList(val) {
  query.value.pageNum = val;
  getRoleList();
}


getRoleList();

// 查询角色列表
function getRoleList() {
  RoleList(query.value)
      .then(res => {
        if (res.data.code == 200000) {
          console.log(res.data.data)
          roleList.value = res.data.data.records;
          query.value.total = res.data.data.total
          showPagination = true
        }
      })
}

/*
function getMenuFirstListAuthor(data) {
  MenuFirstListAuthor(data)
      .then(res => {
        casValue.value = res.data.data;
      })
}
*/

// 回显角色信息
function roleReedBackValue(val){
  roleInfo.value.name = val.name
  roleInfo.value.description = val.description
  roleInfo.value.id = val.id
  console.log(val)
  dialogVisible.value = true
}

// 修改角色信息
const onSubmit = () => {
  RoleEdit(roleInfo.value)
      .then(res => {
        if (res.data.code == 200000) {
          hide();
          getRoleList();
        } else {
          //错误提示框
          ElMessage({
            message: res.data.msg,
            type: 'warning'
          });
        }
      })
}
const onSubmit1 = () => {
  // 复制角色id
  roleMenuInfo.value.roleId = roleId.value;
  // 获取选中的菜单id
  roleMenuInfo.value.menuIds = JSON.stringify(casValue.value);
  // console.info(roleMenuInfo.value,'-----------------roleMenuInfo.value');
  RoleMenuAdd(roleMenuInfo.value)
      .then(res => {
        if (res.data.code == 200000) {
          dialogVisibleShouquan.value = false;
          getRoleList();
          ElMessage.success(res.data.errorMessage)
        } else {
          //错误提示框
          ElMessage({
            message: res.data.errorMessage,
            type: 'warning'
          });
        }
      })
}

function deleteRole(data) {
  ElMessageBox.confirm(
      '是否确认删除',
      '提醒', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    RoleDelete(data.id)
        .then(res => {
          if (res.data.code == 200000) {
            hide();
            getRoleList();
            ElMessage({
              type: 'success',
              message: '删除成功'
            });
          } else {
            ElMessage({
              message: res.data.msg,
              type: 'warning'
            });
          }
        })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '删除取消'
    })
  })
}

function show() {
  dialogVisible.value = true;
  getRoleList();
}

function hide() {
  dialogVisible.value = false;
}

function shouquan(data) {
  roleId = ref(0);
  // getMenuFirstListAuthor(data.id);
  dialogVisibleShouquan.value = true;
  roleId.value = data.id;
  getMenuList();
}

function shouquanClose() {
  dialogVisibleShouquan.value = true;
}

function getMenuList() {
  MenuList()
      .then(res => {
        if(res.data.code == 200000){
          console.log(res.data.data)
          menuList.value = res.data.data;
        }
      })
}


function change(item) {
  item.forEach((i) => {
    console.info(i);
    if (i[0] != tag.value) {
      tag.value = i[0];
    }
  }); // 如切换勾选，则让标识符的值等于勾选的父级的value
  let filterd = item.filter((v) => v[0] == tag.value); // 过滤出与标识符相符的选项

  // casValue.value = [];
  casValue.value.push(...filterd);
}

</script>
<style>
body {
  background-color: aliceblue;
}

.main-div {
  border: 1px solid #cccccc;
  border-radius: 5px;
  background-color: white;
}

.el-form {
  margin-top: 8px;
  padding-left: 18px;
  background-color: white;
}

.add-div {
  padding-left: 18px;
}

.el-table {
  margin-top: 5px;
  padding-left: 10px;
  /* border-radius: 5% 5% 5% 5%;  */
  /* transform: skew(10deg); */
}

.el-table__column-resize-proxy {
  display: block;
}
</style>